import Layout from '../../components/Layout'
// Layout 组件
import { DictChapterButton } from './components/DictChapterButton'
// 选择词库和章节的按钮组件
import PronunciationSwitcher from './components/PronunciationSwitcher'
// 发音开关组件
import ResultScreen from './components/ResultScreen'
// 结果展示组件
import Speed from './components/Speed'
// 打字速度展示组件
import StartButton from './components/StartButton'
// 开始按钮组件
import Switcher from './components/Switcher'
// 启动/暂停按钮组件
import WordList from './components/WordList'
// 单词列表组件
import WordPanel from './components/WordPanel'
// 主要的单词展示和输入组件
import { useConfetti } from './hooks/useConfetti'
// 结束时的彩带特效钩子
import { useWordList } from './hooks/useWordList'
// 获取单词列表的钩子
import { TypingContext, TypingStateActionType, initialState, typingReducer } from './store'
// 打字状态管理相关
import { DonateCard } from '@/components/DonateCard'
//  捐赠卡片组件
import EnhancedPromotionModal from '@/components/EnhancedPromotionModal'
// 增强功能推广弹窗组件
import Header from '@/components/Header'
//  页面头部组件
import Tooltip from '@/components/Tooltip'
// 文字提示组件
import { idDictionaryMap } from '@/resources/dictionary'
// 词库 ID 到词库数据的映射
import { currentChapterAtom, currentDictIdAtom, isReviewModeAtom, randomConfigAtom, reviewModeInfoAtom } from '@/store'
// 全局状态管理相关
import { IsDesktop, isLegal } from '@/utils'
// 工具函数
import { useSaveChapterRecord } from '@/utils/db'
//   保存章节记录的钩子
import { useMixPanelChapterLogUploader } from '@/utils/mixpanel'
// MixPanel 章节日志上传钩子
import { useAtom, useAtomValue, useSetAtom } from 'jotai'
// Jotai 状态管理库
import type React from 'react'
// React 类型导入
import { useCallback, useEffect, useState } from 'react'
// React 钩子导入
import { useImmerReducer } from 'use-immer'

// Immer 版本的 useReducer

const App: React.FC = () => {
  const [state, dispatch] = useImmerReducer(typingReducer, structuredClone(initialState)) // 使用 Immer 版本的 useReducer 来管理打字状态
  console.log('Typing state:', state)
  const [isLoading, setIsLoading] = useState<boolean>(true) // 加载状态
  const { words } = useWordList() // 获取单词列表

  const [currentDictId, setCurrentDictId] = useAtom(currentDictIdAtom) // 当前选中字典 ID 和设置字典 ID 的函数
  const setCurrentChapter = useSetAtom(currentChapterAtom) // 设置当前章节的函数
  const randomConfig = useAtomValue(randomConfigAtom) // 随机配置
  const chapterLogUploader = useMixPanelChapterLogUploader(state) // 章节日志上传函数 重要 但是等会来看看
  const saveChapterRecord = useSaveChapterRecord() // 保存章节记录函数

  const reviewModeInfo = useAtomValue(reviewModeInfoAtom) // 复习模式信息
  const isReviewMode = useAtomValue(isReviewModeAtom) // 是否为复习模式

  useEffect(() => {
    // 检测用户设备
    // if (!IsDesktop()) {
    //   setTimeout(() => {
    //     alert(
    //       ' Qwerty Learner 目的为提高键盘工作者的英语输入效率，目前暂未适配移动端，希望您使用桌面端浏览器访问。如您使用的是 Ipad 等平板电脑设备，可以使用外接键盘使用本软件。',
    //     )
    //   }, 500)
    // }
  }, [])

  // 在组件挂载和currentDictId改变时，检查当前字典是否存在，如果不存在，则将其重置为默认值
  useEffect(() => {
    // 如果字典为空或者是不在字典数组中
    const id = currentDictId
    if (!(id in idDictionaryMap)) {
      // 如果当前字典 ID 不存在于字典映射中
      setCurrentDictId('cet4') // 默认值
      setCurrentChapter(0) // 重置章节为0
      return
    }
  }, [currentDictId, setCurrentChapter, setCurrentDictId]) // 检查字典 ID 是否有效

  const skipWord = useCallback(() => {
    dispatch({ type: TypingStateActionType.SKIP_WORD }) // 跳过当前单词
  }, [dispatch]) // 跳过当前单词的回调函数

  useEffect(() => {
    // 监听页面失去焦点事件
    const onBlur = () => {
      dispatch({ type: TypingStateActionType.SET_IS_TYPING, payload: false }) // 失去焦点时停止打字
    } // 失去焦点时停止打字
    window.addEventListener('blur', onBlur) // // 添加事件监听器

    return () => {
      window.removeEventListener('blur', onBlur)
    } // 组件卸载时移除事件监听器
  }, [dispatch])

  useEffect(() => {
    // 根据单词列表长度设置加载状态
    state.chapterData.words?.length > 0 ? setIsLoading(false) : setIsLoading(true) // 设置加载状态
  }, [state.chapterData.words]) // 根据单词列表长度设置加载状态

  useEffect(() => {
    // 监听键盘按下事件
    if (!state.isTyping) {
      // 只有在未打字时才监听键盘事件
      const onKeyDown = (e: KeyboardEvent) => {
        // 键盘按下事件处理函数
        if (!isLoading && e.key !== 'Enter' && (isLegal(e.key) || e.key === ' ') && !e.altKey && !e.ctrlKey && !e.metaKey) {
          // 如果不是加载中且按下的键是合法字符且没有按下组合键
          e.preventDefault() // 阻止默认行为
          dispatch({ type: TypingStateActionType.SET_IS_TYPING, payload: true }) // 开始打字
        }
      }
      window.addEventListener('keydown', onKeyDown) // 添加键盘按下事件监听器

      return () => window.removeEventListener('keydown', onKeyDown)
    }
  }, [state.isTyping, isLoading, dispatch])

  useEffect(() => {
    // 当单词列表变化时，设置章节数据
    if (words !== undefined) {
      // 如果单词列表已定义
      const initialIndex = isReviewMode && reviewModeInfo.reviewRecord?.index ? reviewModeInfo.reviewRecord.index : 0 // 复习模式下从记录的索引开始，否则从0开始

      dispatch({
        // 设置章节数据
        type: TypingStateActionType.SETUP_CHAPTER,
        payload: { words, shouldShuffle: randomConfig.isOpen, initialIndex }, // 是否随机打乱单词顺序和初始索引
      })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [words]) // 当单词列表变化时，设置章节数据

  useEffect(() => {
    // 当用户完成章节后且完成 word Record 数据保存，记录 chapter Record 数据,
    if (state.isFinished && !state.isSavingRecord) {
      // 如果章节完成且不在保存记录中
      chapterLogUploader() // 上传章节日志
      saveChapterRecord(state) // 保存章节记录
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state.isFinished, state.isSavingRecord])

  useEffect(() => {
    // 监听打字状态，
    // 启动计时器
    let intervalId: number
    if (state.isTyping) {
      // 如果正在打字，则启动计时器
      intervalId = window.setInterval(() => {
        // 每秒触发一次 TICK_TIMER 动作
        dispatch({ type: TypingStateActionType.TICK_TIMER }) // 每秒触发一次 TICK_TIMER 动作
      }, 1000)
    }
    return () => clearInterval(intervalId) // 清除计时器
  }, [state.isTyping, dispatch])

  useConfetti(state.isFinished) // 结束时的彩带特效

  return (
    <TypingContext.Provider value={{ state: state, dispatch }}>
      <EnhancedPromotionModal />
      {state.isFinished && <DonateCard />}
      {state.isFinished && <ResultScreen />}
      <Layout>
        <Header>
          <DictChapterButton />
          <PronunciationSwitcher />
          <Switcher />
          <StartButton isLoading={isLoading} />
          <Tooltip content="跳过该词">
            <button
              className={`${
                state.isShowSkip ? 'bg-orange-400' : 'invisible w-0 bg-gray-300 px-0 opacity-0'
              } my-btn-primary transition-all duration-300 `}
              onClick={skipWord}
            >
              Skip
            </button>
          </Tooltip>
        </Header>
        <div className="container mx-auto flex h-full flex-1 flex-col items-center justify-center pb-5">
          <div className="container relative mx-auto flex h-full flex-col items-center">
            <div className="container flex flex-grow items-center justify-center">
              {isLoading ? ( // 加载中显示加载动画
                <div className="flex flex-col items-center justify-center ">
                  <div
                    className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid  border-indigo-400 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
                    role="status"
                  ></div>
                </div>
              ) : (
                !state.isFinished && <WordPanel /> // 显示单词面板
              )}
            </div>
            <Speed />
          </div>
        </div>
      </Layout>
      <WordList />
    </TypingContext.Provider>
  )
}

export default App
